<template>
  <section class="functTop">
    <form @submit.prevent="handleSubmit">
      <div class="form">
        <div class="filterClass">
          <select id="className" name="className" v-model="class_name">
            <option label="全部" value=""></option>
            <option
              v-for="(item, index) in classNameList"
              :key="index"
              :label="item"
              :value="item"
            ></option>
          </select>
        </div>
        <div class="blurSearch">
          <input v-model="title" placeholder="输入关键词搜索" />
          <button>重置</button>
          <button type="submit">搜索</button>
        </div>

        <div class="newArticle">
          <el-button type="danger" class="post_btn" @click="$emit('addArticle')"
            >新建文章</el-button
          >
        </div>
      </div>
    </form>
  </section>
</template>

<script>
export default {
  name: "top",
  data() {
    return {
      title: "",
      class_name: "",
    };
  },
  props: {
    classNameList: Array,
  },
  methods: {
    searchTitleName(data) {
      this.$axios
        .get("/api/article/getOne", {
          params: {
            title: data,
          },
        })
        .then((res) => {
          console.log(res);
          this.$emit("getBlurArt", res.data.doc);
        })
        .catch((err) => console.log(err));
    },
    handleSubmit() {
      //获取选项的内容
      // const selectedOption = this.classNameList.find((option) => option === this.class_name);
      this.$axios
        .get("/api/article/getOne", {
          params: {
            title: this.title,
            class_name: this.class_name,
          },
        })
        .then((res) => {
          console.log(res);
          this.$emit("getBlurArt", res.data.doc);
        })
        .catch((err) => console.log(err));
    },
  },
};
</script>

<style scoped lang="scss">
.functTop {
  .form {
    display: flex;
    justify-content: left;
    margin-bottom:10px;
    .filterClass {
      margin-right:10px;
      select {
        width:120px;
        height:30px;
        border:0;
        outline:0;
        
      }
    }
    .blurSearch {
      input {
        width: 120px;
        height: 29px;
        border: 0;
        outline: 0;
        padding: 5px;
        box-sizing: border-box;
        margin-right: 5px;
      }
      button {
        height: 30px;
        font-size: 12px;
        background-color: #ccc;
        border: 0;
        border-radius: 5px;
        margin-right: 5px;
        &:hover {
          background-color: skyblue;
        }
      }
    }
    .newArticle {
      .post_btn {
        height:30px;
        line-height:0;
        font-size: 14px;
      }
    }
  }
}
</style>